<template>
	<n-radio-group :value="modelValue" @update:value="handleChange">
		<n-space>
			<n-tooltip :show-arrow="false" trigger="hover" v-for="item in rendererList" :key="item.value">
				<template #trigger>
					<n-radio :value="item.value">
						{{ item.value }}
					</n-radio>
				</template>
				{{ item.desc }}
			</n-tooltip>
		</n-space>
	</n-radio-group>
</template>

<script setup>
const props = defineProps({
		modelValue: {
			type: String,
			default: 'svg'
		}
	}),
	emits = defineEmits(['update:modelValue']);

function handleChange(val) {
	emits('update:modelValue', val);
}

const rendererList = [
	{
		value: 'svg',
		desc: '在缩放场景下具有更好的表现'
	},
	{
		value: 'canvas',
		desc: '数据量较大（经验判断 > 1k）、较多交互时，建议选择'
	}
];
</script>
